import { Space, Table, Tag } from 'antd';
import React from 'react';
const { Column, ColumnGroup } = Table;
const data = [
    {
        key: '1',
        firstName: 'John',
        lastName: 'Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        firstName: 'Jim',
        lastName: 'Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        firstName: 'Joe',
        lastName: 'Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];
const handleAdd = (event) => {

    console.log(event)

};
const EmpFrom = () => (
    <div>
        <div>

        </div>
        <Table dataSource={data}  onRow={record => {
            return {
                onClick: event => {
                    alert(record.tags);
                }, // 点击行
                onDoubleClick: event => {},
                onContextMenu: event => {},
                onMouseEnter: event => {

                }, // 鼠标移入行
                onMouseLeave: event => {},
            };
        }}>
            <ColumnGroup title="Name">
                <Column title="First Name" dataIndex="firstName" key="firstName" />
                <Column title="Last Name" dataIndex="lastName" key="lastName" />
            </ColumnGroup>
            <Column title="Age" dataIndex="age" key="age" />
            <Column title="Address" dataIndex="address" key="address" />
            <Column
                title="Tags"
                dataIndex="tags"
                key="tags"
                render={(tags) => (
                    <>
                        {tags.map((tag) => (
                            <Tag color="blue" key={tag}>
                                {tag}
                            </Tag>
                        ))}
                    </>
                )}
            />
            <Column
                title="Action"
                key="action"
                render={(_, record) => (
                    <Space size="middle">
                        <a onClick={handleAdd(record.firstName)}>Invite {record.lastName}</a>
                        <a>Delete</a>
                    </Space>
                )}
            />
        </Table>
    </div>

);

export default EmpFrom;